<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  

        <div id="app">
            
            <h1>使用三木运算符实现男女过滤</h1>
            <li v-for="(user, index) in users" :key="user.name">
                当前索引： {{index}} {{user.name}} ==> {{user.age}} ==> {{user.gender == 1 ? "靓仔" : "美女"}}  <br>
            </li>

            <h1>使用过滤器实现男女过滤</h1>
            <li v-for="(user, index) in users" :key="index">
                当前索引： {{index}} {{user.name}} ==> {{user.age}} ==> {{user.gender | genderFilter}}  <br> <!--通过管道符将 gender 传给过滤器-->
            </li>


        </div>

        <script src="./node_modules/vue/dist/vue.js"></script>
        <script>

            Vue.filter("gFilter", function(val){ // 全局过滤器，在任何实例中都能用
                if(val == 1){
                    return "靓仔"
                } else{
                    return "美女"
                }
            })

            new Vue({
                el: '#app',
                data:{
                    users: [
                        {name: "wangqing", age:20, gender:0},
                        {name: "tian~", age:20, gender:0},
                        {name: "xinyu", age:22, gender:1}
                    ],
                },
                filters:{ // 过滤器属性
                    genderFilter(val){ // 过滤器接收一个值返回一个值
                        if(val == 1){
                            return "靓仔"
                        } else{
                            return "美女"
                        }
                    }
                },
                method: {
                    
                }
            });
        </script> 

</body>
</html>
